<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="pie_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart, View } from "@antv/g2";
import { DataView } from "@antv/data-set";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { label: "衣服", company: "公司A", nums: 28 },
        { label: "裤子", company: "公司A", nums: 32 },
        { label: "衬衫", company: "公司A", nums: 40 },
        { label: "毛衣", company: "公司B", nums: 18 },
        { label: "T恤", company: "公司B", nums: 52 },
        { label: "围巾", company: "公司B", nums: 15 },
      ],
    };
  },
  created() {
    // 模拟数据变化
      setTimeout(() => {
        this.dataList.push(
          { label: "帽子", company:'公司A', nums: 8 },
          { label: "皮鞋", company:'公司B', nums: 11 }
        );
      }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "pie_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
    });
    // innerChart
    // 给图表赋值
    const transData = this.transformData(this.dataList);
    const innerChart = this.chart.createView();
    innerChart.data(transData.innerData);
    // 设置提示信息
    innerChart.tooltip({
      showMarkers: false,
      itemTpl:
        '<li class="g2-tooltip-list-item" style="margin-bottom:4px;text-align: left;">' +
        '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
        "{value}" +
        "</li>",
    });
    // 设置 nums 度量，重新格式化数据
    innerChart.scale("nums", {
      formatter(val) {
        return val + "万件";
      },
    });
    // 使用交互效果
    innerChart.interaction("element-highlight");
    // 取消图例交互
    innerChart.removeInteraction("legend-filter");
    // 设置坐标系为 theta
    innerChart.coordinate("theta", {
      radius: 0.4,
    });
    // 映射图表
    innerChart
      .interval()
      .position("nums")
      .color("company",(val) => val == '公司A' ? '#6930c3' : '#11698e')
      // 自定义 tooltip
      .tooltip("company*nums*percent", (company, nums, percent) => {
        return {
          name: company,
          value: `${nums}万件 ( ${(percent * 100).toFixed(2)} )%`,
        };
      })
      .style({
        lineWidth: 1,
        stroke: "#fff",
      })
      .label("nums", {
        content(data) {
          return `${data.company}`;
        },
        offset: "-30%",
      })
      // 设置为层叠，让总值占满整个圆
      // 不设置层叠会以值最大的占满整个圆，其他项照此比例覆盖
      .adjust("stack");

    // outerChart
    const outerView = this.chart.createView();
    outerView.data(transData.outerData);
    // 设置 nums 度量，重新格式化数据
    outerView.scale("nums", {
      formatter(val) {
        return val + "万件";
      },
    });
    // 使用交互效果
    outerView.interaction("element-highlight");
    // 设置坐标系为 theta
    outerView.coordinate("theta", {
      // 因为 outerView 占了 0.8 所以内部空开的位置需要计算一下
      innerRadius: 0.4 / 0.8,
      radius: 0.8,
    });
    outerView.tooltip({
      showMarkers: false,
      itemTpl:
        '<li class="g2-tooltip-list-item" style="margin-bottom:4px;text-align: left;">' +
        '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
        "{value}" +
        "</li>",
    });
    outerView.removeInteraction("legend-filter");
    outerView
      .interval()
      .position("nums")
      .color("label")
      .style({
        lineWidth: 1,
        stroke: "#fff",
      })
      .label("nums", {
        content(data) {
          return `${data.label}`;
        },
        offset: "-30%",
      })
      .tooltip("label*nums*percent", (label, nums, percent) => {
        return {
          name: label,
          value: `${nums}万件 ( ${(percent * 100).toFixed(2)} )%`,
        };
      })
      .adjust("stack");
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      const transData = this.transformData(newValue);
      const views = this.chart.views;
      views[0].changeData(transData.innerData);
      views[1].data(transData.outerData);
      views[1].render();
    },
  },
  methods: {
    // 计算每一项所占百分比
    transformData(data) {
      const dv = new DataView().source(data);
      dv.transform({
        type: "percent",
        field: "nums",
        dimension: "company",
        as: "percent",
      }).transform({
        type: 'sort-by',
        fields: ['company'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
        order: 'ASC', // 默认为 ASC，DESC 则为逆序
      });
      const dv2 = new DataView().source(data);
      dv2.transform({
        type: "percent",
        field: "nums",
        dimension: "label",
        as: "percent",
      }).transform({
        type: 'sort-by',
        fields: ['company'],
        order: 'ASC',
      });;
      return {
        innerData: dv.rows,
        outerData: dv2.rows,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>